<template>
  <section>
    <div v-if="name==='carrierName'">
      <p>{{ row.carrierName || (row.carrier && row.carrier.carrierName) }}</p>
    </div>
    <div v-else-if=" row.carrierName || row.carrier">
      <p>
        <Tooltip v-if="iconName"
                 :content="content"
                 :placement="placement">
          <icon-svg class-name="iconClass mr5"
                    :icon-name="iconName" />
        </Tooltip>
        {{ row.carrierName || (row.carrier && row.carrier.carrierName) }}
        <br />
        {{ row.driverName || (row.carrier && row.carrier.driverName) }}
        {{ row.driverMobile || (row.carrier && row.carrier.driverMobile) }}
      </p>
    </div>
    <div v-else>
      --
    </div>
  </section>
</template>

<script>
import Tooltip from "@components/basic/Tooltip.vue";
export default {
  name: "CarrierInfo",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    name: {
      type: String,
      default: ""
    },
  },
  components: {
    Tooltip
  },
  computed: {
    placement () {
      return 'top'
    },
    content () {
      const { carrier, carrierType, carrierExtraType } = this.row
      if (carrier?.carrierType === 0 || carrierType === 0) {
        return '线下'
      }
      if ((carrier?.carrierType === 1 || carrierType === 1) && (carrier?.carrierExtraType === 0 || carrierExtraType === 0)) {
        return '线上'
      }
      return ''
    },
    iconName () {
      const { carrier, carrierType, carrierExtraType } = this.row
      if (carrier?.carrierType === 0 || carrierType === 0) {
        return 'xianxia'
      }
      if ((carrier?.carrierType === 1 || carrierType === 1) && (carrier?.carrierExtraType === 0 || carrierExtraType === 0)) {
        return 'xianshang'
      }
      return ''
    }
  }
};
</script>
<style scoped>
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 !important;
}
.iconClass {
  width: 14px;
  height: 14px;
}
</style>